<template>
  <div class="userData">
    <div class="user">
      <div class="topData">
        <div class="userBox">
          <div class="userNameImg">
            <div class="userImg">
              <img :src="userInfo.avatar" alt="">
            </div>
            <div class="username">
              <div class="name">{{ userInfo.nickname }}</div>
              <div class="ID">SID：{{ userInfo.id }}</div>
            </div>
          </div>
          <div class="btn2">
            <div class="vipBtn">{{ userInfo.is_vip ? 'Участник VIP' : 'отсутствующий VIP' }} </div>
            <div class="svipBtn">Продление</div>
          </div>
          <div class="tishi" v-if="isExpired">Просрочено на {{ calculateTimeDifference(userInfo.vip_expiry_at) }} дня</div>
          <div class="tishi" v-else>Срок действия истекает через {{ calculateTimeDifference(userInfo.vip_expiry_at) }} дней</div>
          <div class="balance">
            <div class="quan">
              <div class="title">Купоны</div>
              <div class="yueBox">
                <img class="wallet_view_img" src="/src/assets/icons/account/coupon_icon.png" alt="">
                <div class="yue">0</div>
              </div>
            </div>
            <div class="quan">
              <div class="title">Интеграция</div>
              <div class="yueBox">
                <img class="wallet_view_img" src="/src/assets/icons/account/points_icon.png" alt="">
                <div class="yue">{{ userInfo.points }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="userAmount">
          <div class="title">
            <img src="/src/assets/image/qianbao.png" alt="">
            <div class="text">Бумажник</div>
          </div>
          <div class="yinhangBox">
            <div class="tishi">Имеющийся остаток</div>
            <div class="sguzi">{{ userInfo.balance }}</div>
          </div>
          <div class="tongji">
            <div class="chongzhi">
              <img src="/src/assets/image/chongzhi.png" alt="">
              <div class="text">Заполнение</div>
            </div>
            <div class="chongzhi" style="border-right: 1px solid #EEEEEE;border-left: 1px solid #EEEEEE;height: 34px">
              <img src="/src/assets/image/tixian.png" alt="">
              <div class="text">Показать</div>
            </div>
            <div class="chongzhi">
              <img src="/src/assets/image/mingxi.png" alt="">
              <div class="text">Разбивка <br>остатков</div>
            </div>
          </div>
        </div>
      </div>
      <div class="myDingdan">
        <div class="title">
          <img src="/src/assets/icons/account/order_icon.png" alt="">
          <div class="text">Мой заказ</div>
        </div>
        <div class="account_order_list items wrap mTop20">
          <div v-for="item in state.orderList" class="mTop20 order_list">
            <div class="order_list_num">{{ item.num }}</div>
            <div class="order_list_title mTop8 c99">{{ item.title }}</div>
          </div>
        </div>
      </div>
      <div class="myPaihang">
        <div class="title">
          <img src="/src/assets/image/shuju.png" alt="">
          <div class="text">Товарный список</div>
          <div class="goRuser">Больше<el-icon><ArrowRight /></el-icon></div>
        </div>
        <div class="account_table mTop12">
          <div class="items account_table_header c33">
            <div class="mLeft18 c33" style="font-weight: 600">Рейтинг</div>
            <div class="mLeft87 c33" style="font-weight: 600">Название товара</div>
            <div class="mLeft216 c33" style="font-weight: 600;margin-left: 216px">Цены</div>
            <div class="mLeft67 c47" style="font-weight: 600;margin-left: 60px">Продажи</div>
          </div>
          <div class="account_table_list mTop8">
            <div class="table_line items" v-for="(item, index) in 10">
              <div class="table_line_sort mLeft20">
                <img v-if="index <= 2"
                     :src="'/src/assets/icons/account/sort_icon_' + index + '.png'" alt="">
                <img v-else :src="'/src/assets/icons/account/sort_icon.png'" alt="">
                <div class="center mTop2 cFF">
                  {{ index + 1 }}
                </div>
              </div>
              <img src="/src/assets/image/goodscs.png" alt="" class="table_line_img mLeft30">
              <div class="table_line_name mLeft12 c33">
                <p style="font-weight: 600">Название продукта слишком длинное</p>
              </div>
              <div class="table_line_price  cFF8" style="color: #F83C57 ;font-weight: 600">398.00</div>
              <div class="table_line_saleNum  c33">19</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="news">
      <div class="newsBox">
        <div class="title">
          <img src="/src/assets/image/gonggao.png" alt="">
          <div class="text">Объявление платформы</div>
        </div>
        <div v-for="item in 7" class="items mTop12 announcement_view">
          <div class="announcement_round"></div>
          <div class="mLeft6 announcement_text c33">Lorem ipsum dolor sit amet</div>
        </div>
      </div>

      <div class="gonggaoBox">
        <div class="title">
          <img src="/src/assets/image/bangzhu.png" alt="">
          <div class="text">Часто задаваемые вопросы</div>
        </div>
        <div v-for="item in 7" class="items mTop12 problem_view">
          <img alt="" src="/src/assets/icons/account/problem_icon_1.png">
          <div class="mLeft6 problem_text c33">Lorem ipsum dolor sit amet</div>
        </div>
        <div class="center mTop16 problem_more c47">Больше></div>
      </div>

      <div class="kefuBox">
        <div class="title">
          <img src="/src/assets/image/userkf.png" alt="">
          <div class="text">Обслуживание клиентов</div>
        </div>
        <div class="mTop12">
          <el-input v-model="input" placeholder="Введите вопрос, который вы хотите проконсультировать"
                    type="textarea" />
          <div class="mTop12">
            <div class="customer_btn items">
              <img alt="" src="/src/assets/icons/account/refund_icon.png">
              <div class="mLeft6">Как вернуть деньги</div>
            </div>
            <div class="mTop8 customer_btn items">
              <img alt="" src="/src/assets/icons/account/controls_icon.png">
              <div class="mLeft6">Как вернуть деньги</div>
            </div>
            <div class="mTop8 customer_btn items">
              <img alt="" src="/src/assets/icons/account/logistics_icon.png">
              <div class="mLeft6">Как вернуть деньги</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {reactive, ref} from 'vue'
import {ArrowRight} from "@element-plus/icons-vue";
import {getUserInfoMy} from "@/api/api"
const state = reactive({
  orderList: [
    {
      num: '1',
      title: 'Подписка на 1 месяц'
    },
    {
      num: '2',
      title: 'Подписка на 1 месяц'
    },
    {
      num: '3',
      title: 'Подписка на 1 месяц'
    },
    {
      num: '4',
      title: 'Подписка на 1 месяц'
    },
    {
      num: '4',
      title: 'Подписка на 1 месяц'
    },
    {
      num: '4',
      title: 'Подписка на 1 месяц'
    },
    {
      num: '4',
      title: 'Подписка на 1 месяц'
    },
    {
      num: '4',
      title: 'Подписка на 1 месяц'
    }
  ]
})
const userInfo = ref<any>({})
function getUserInfo(){
  getUserInfoMy().then((res:any)=>{
    userInfo.value = res.returnData
  })
}
getUserInfo()
const isExpired = ref(false)
function calculateTimeDifference(date:any,) {
  const expiryTiem = new Date(date).getTime();
  const newTiem = new Date().getTime();
  isExpired.value = expiryTiem<newTiem
  let diffTime = 0
  if(isExpired.value){
    diffTime = Math.abs(newTiem - expiryTiem);
  }else{
    diffTime = Math.abs(expiryTiem - newTiem);
  }
   // 计算两个日期之间的毫秒数差
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); // 天数差
  return diffDays
}
</script>
<style scoped lang="less">
.userData{
  display: flex;
  justify-content: space-between;
  .user{
    width: 810px;
    .topData{
      display: flex;
      justify-content: space-between;
      .userBox{
        width: 338px;
        height: 239px;
        background: #FFFFFF;
        border-radius: 16px 16px 16px 16px;
        box-sizing: border-box;
        padding: 20px;
        .userNameImg{
          display: flex;
          align-items: center;
          .userImg{
            width: 64px;
            height: 64px;
            border-radius: 64px;
            overflow: hidden;
            img{
              width: 100%;
            }
          }
          .username{
            margin-left: 12px;
            .name{
              margin-bottom: 8px;
              font-family: PingFang SC, PingFang SC;
              font-weight: bold;
              font-size: 20px;
              color: #333333;
              line-height: 20px;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }
            .ID{
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 14px;
              color: #999999;
              line-height: 14px;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }

          }

        }
        .btn2{
          display: flex;
          margin-top: 12px;
          .vipBtn{
            box-sizing: border-box;
            padding: 6px 10px;
            background: #0070E9;
            border-radius: 17px 17px 17px 17px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 14px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-right: 6px;
            cursor: pointer;
          }
          .svipBtn{
            cursor: pointer;
            box-sizing: border-box;
            padding: 6px 10px;
            background: #333333;
            border-radius: 17px 17px 17px 17px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #FFEABB;
            line-height: 14px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
        .tishi{
          margin-top: 8px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 11px;
          color: #F83C57;
          line-height: 11px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
        .balance{
          display: flex;
          width: 100%;
          justify-content: space-between;
          margin-top: 12px;
          .quan{
            width: 141px;
            height: 68px;
            background: #F6F6F6;
            border-radius: 8px 8px 8px 8px;
            box-sizing: border-box;
            padding: 10px;
            .title{
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 14px;
              color: #999999;
              line-height: 14px;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }
            .yueBox{
              display: flex;
              align-items: center;
              margin-top: 16px;
              img{
                width: 16px;
                height: 16px;
                margin-right: 8px;
              }
              .yue{
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                font-size: 20px;
                color: #333333;
                line-height: 20px;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }
            }
          }
          .qian{
            width: 141px;
            height: 68px;
            background: #F6F6F6;
            border-radius: 8px 8px 8px 8px;
            box-sizing: border-box;
            padding: 10px;
          }
        }
      }
      .userAmount{
        width: 456px;
        height: 239px;
        background: #FFFFFF;
        border-radius: 16px 16px 16px 16px;
        box-sizing: border-box;
        padding: 16px 20px;
        .title{
          display: flex;
          align-items: center;
          padding-bottom: 16px;
          border-bottom: 1px solid #EEEEEE;
          img{
            width: 22px;
            height: 22px;
          }
          .text{
            margin-left: 8px;
            font-family: Segoe UI, Segoe UI;
            font-weight: bold;
            font-size: 16px;
            color: #333333;
            line-height: 16px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
        .yinhangBox{
          .tishi{
            font-family: Segoe UI, Segoe UI;
            font-weight: 600;
            font-size: 12px;
            color: #333333;
            line-height: 12px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-top: 20px;
          }
          .sguzi{
            margin-top: 10px;
            width: 168px;
            height: 28px;
            font-family: Segoe UI, Segoe UI;
            font-weight: bold;
            font-size: 28px;
            color: #0070E9;
            line-height: 28px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
        .tongji{
          display: flex;
          justify-content: space-between;
          width: 100%;
          .chongzhi{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 30px;
            width: 33.33%;
            img{
              width: 26px;
              height: 26px;
              margin-bottom: 8px;
            }
            .text{
              font-family: Segoe UI, Segoe UI;
              font-weight: 600;
              font-size: 16px;
              color: #999999;
              line-height: 16px;
              text-align: center;
              font-style: normal;
              text-transform: none;
            }
          }
        }
      }
    }
    .myDingdan{
      width: 810px;
      height: 259px;
      background: #FFFFFF;
      border-radius: 16px 16px 16px 16px;
      margin-top: 16px;
      box-sizing: border-box;
      padding: 16px 20px;
      .title{
        display: flex;
        align-items: center;
        padding-bottom: 16px;
        border-bottom: 1px solid #EEEEEE;
        img{
          width: 22px;
          height: 22px;
        }
        .text{
          margin-left: 8px;
          font-family: Segoe UI, Segoe UI;
          font-weight: bold;
          font-size: 16px;
          color: #333333;
          line-height: 16px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .account_order_list{
        .order_list {
          cursor: pointer;
          width: 25%;
          text-align: center;

          &_num {
            font-family: PingFang SC;
            font-size: 28px;
            line-height: 28px;
          }

          &_title {
            font-family: PingFang SC;
            font-size: 12px;
            line-height: 12px;
            min-height: 24px;
          }
        }
      }
    }
    .myPaihang{
      margin-top: 16px;
      width: 810px;
      //height: 700px;
      background: #FFFFFF;
      border-radius: 16px 16px 16px 16px;
      box-sizing: border-box;
      padding: 16px 20px;
      .title{
        display: flex;
        align-items: center;
        padding-bottom: 16px;
        border-bottom: 1px solid #EEEEEE;
        .goRuser{
          margin-left: 8px;
          display: flex;
          align-items: center;
          padding: 6px 8px;
          background: #EBF7FF;
          border-radius: 8px 8px 8px 8px;
          font-family: Segoe UI, Segoe UI;
          font-weight: 600;
          font-size: 14px;
          color: #0070E9;
          line-height: 14px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
        img{
          width: 22px;
          height: 22px;
        }
        .text{
          margin-left: 8px;
          font-family: Segoe UI, Segoe UI;
          font-weight: bold;
          font-size: 16px;
          color: #333333;
          line-height: 16px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .account_table {
        font-family: PingFang SC;
        font-weight: 400;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;

        &_header {
          width: 770px;
          height: 48px;
          border-radius: 8px;
          background: #F6F6F6;
          font-size: 16px;
          line-height: 19.2px;
        }

        &_list {
          .table_line {
            width: 770px;
            height: 88px;
            border-bottom: 1px solid #EEEEEE;

            &_sort {
              width: 20px;
              height: 24px;
              position: relative;

              img {
                width: 100%;
                height: 100%;
                position: absolute;
                z-index: 1;
              }

              div {
                position: absolute;
                z-index: 2;
                width: 100%;
                height: 100%;
              }
            }

            &_img {
              width: 64px;
              height: 64px;
              border-radius: 4px;
            }

            &_name {
              width: 382px;
              font-size: 16px;
              //line-height: 19.2px;

              p {
                width: 235px;
              }
            }

            &_price {
              width: 109px;
              font-size: 16px;
              line-height: 19.2px;
            }

            &_saleNum {
              width: 71px;
              font-size: 16px;
              line-height: 19.2px;
              text-align: center;
            }
          }
        }
      }
    }
  }
  .news{
    flex: 1;
    margin-left: 16px;
    .newsBox{
      width: 338px;
      //height: 325px;
      background: #FFFFFF;
      border-radius: 16px 16px 16px 16px;
      box-sizing: border-box;
      padding: 16px 20px;
      .title{
        display: flex;
        align-items: center;
        padding-bottom: 16px;
        border-bottom: 1px solid #EEEEEE;
        img{
          width: 22px;
          height: 22px;
        }
        .text{
          margin-left: 8px;
          font-family: Segoe UI, Segoe UI;
          font-weight: bold;
          font-size: 16px;
          color: #333333;
          line-height: 16px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .announcement_view{
        cursor: pointer;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #333333;
        line-height: 14px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-top: 16px;
        .announcement_round{
          width: 6px;
          height: 6px;
          background: #0070E9;
          border-radius: 6px;
          margin-right: 4px;

        }
      }
    }
    .gonggaoBox{
      width: 338px;
      //height: 483px;
      background: #FFFFFF;
      border-radius: 16px 16px 16px 16px;
      margin-top: 16px;
      box-sizing: border-box;
      padding: 16px 20px;
      .title{
        display: flex;
        align-items: center;
        padding-bottom: 16px;
        border-bottom: 1px solid #EEEEEE;
        img{
          width: 22px;
          height: 22px;
        }
        .text{
          margin-left: 8px;
          font-family: Segoe UI, Segoe UI;
          font-weight: bold;
          font-size: 16px;
          color: #333333;
          line-height: 16px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .problem_view{
        cursor: pointer;
        font-family: Segoe UI, Segoe UI;
        font-weight: 600;
        font-size: 14px;
        color: #333333;
        line-height: 17px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        box-sizing: border-box;
        padding: 8px;
        background-color: #F6F6F6;
        border-radius: 4px;
        img{
          width: 14px;
          height: 14px;
        }
      }
    }
    .kefuBox{
      margin-top: 16px;
      width: 338px;
      height: 272px;
      background: #FFFFFF;
      border-radius: 16px 16px 16px 16px;
      box-sizing: border-box;
      padding: 16px 20px;
      .title{
        display: flex;
        align-items: center;
        padding-bottom: 16px;
        border-bottom: 1px solid #EEEEEE;
        img{
          width: 22px;
          height: 22px;
        }
        .text{
          margin-left: 8px;
          font-family: Segoe UI, Segoe UI;
          font-weight: bold;
          font-size: 16px;
          color: #333333;
          line-height: 16px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .customer_btn{
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #333333;
        line-height: 14px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        box-sizing: border-box;
        padding: 8px;
        background-color: #F6F6F6;
        border-radius: 4px;
        cursor: pointer;
        img{
          width: 14px;
          height: 12px;
        }
      }
    }
  }
}
</style>
